<template>
  <div class="Login" ref="login" :style="'height:'+height+'px'">
    <div class="hd">
      <span class="close" @click="$store.dispatch('setLogin', false)"></span>
    </div>
    <div class="logo"></div>
    <div class="form">
      <div class="input">
        <van-field v-model="form.username" clearable placeholder="请输入用户名" />
      </div>
      <div class="input">
        <van-field v-model="form.password" clearable :type="isPasswordType?'text':'password'" placeholder="输入您的密码…">
          <template #right-icon>
            <span class="showPassWord" :class="{active: isPasswordType && form.password}" @click="showPassWord"></span>
          </template>
        </van-field>
      </div>
      <div class="submit">
        <van-button round type="info" @click.native="submitLogin" color="#ffffff">
          <van-loading color="#ff0034" size="24" v-if="isLoading " />
          <span v-else>登录</span>
        </van-button>
      </div>
      <div class="operation">
        <span @click="goPassword">忘记密码</span>
        <span class="reg" @click="$store.dispatch('setLoginType', 'reg');">快速注册</span>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from 'md5';
import { mapGetters } from 'vuex';
export default {
  name: 'JLogin',
  data () {
    return {
      IsPassword: false,
      isLoading: false,
      height: 0,
      focus: {
        username: false,
        password: false
      },
      isPasswordType: false,
      form: {
        username: '', // 17790183715
        password: '' // 111111
      }
    };
  },
  inject: ['reload'],
  computed: {
    ...mapGetters(['isLogin'])
  },

  created () {
    var form = JSON.parse(localStorage.getItem('form'));
    this.IsPassword = !!form;
    this.form = form || {
      username: '',
      password: ''
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.height = document.body.clientHeight;
    });
  },
  methods: {
    focusFun (name) {
      this.focus[name] = true;
    },
    blurFun (name) {
      this.focus[name] = false;
    },
    goPassword () {
      this.$store.dispatch('setLogin', false);
      this.$router.push({ 'path': '/password/edit', query: { type: 1 } });
    },
    submitLogin () {
      if (this.isLoading) {
        return;
      }
      var disabled = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.username));
      if (disabled) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      var _account = this.form.username + '';
      var _password = this.form.password + '';
      if (!_account) {
        this.$toast('手机号不能为空');
        return;
      }
      if (!_password) {
        this.$toast('密码不能为空');
        return;
      }
      var options = {
        username: _account,
        password: md5(md5(_password))
      };
      this.isLoading = true;
      this.$API.user.login(options).then(res => {
        if (res.code === 0) {
          localStorage.setItem('Token', res.data.token);
          if (this.isLogin) {
            this.IsPassword && localStorage.setItem('form', JSON.stringify(this.form));
            this.$toast('登录成功');
            this.$store.dispatch('setLogin', false);
            this.$store.dispatch('setUserInfo');
            localStorage.setItem('reloadRouterURL', this.$route.fullPath);
            this.reload();
          }
        }
        this.isLoading = false;
      });
    },
    showPassWord () {
      if (!this.form.password) {
        return;
      }
      this.isPasswordType = !this.isPasswordType;
    }
  }
};
</script>
<style scoped lang="less">
.Login {
  position: relative;
  background: linear-gradient(259deg, rgba(239, 0, 62, 1) 0%, rgba(253, 32, 77, 1) 100%, rgba(255, 39, 83, 1) 100%);
  padding-top: env(safe-area-inset-top);
  .logo {
    width: 201px;
    height: 201px;
    background-image: url('/static/img/login-logo.png');
    background-repeat: no-repeat;
    background-size: 171px 177px;
    background-position: center center;
    border-radius: 201px;
    margin: 0 auto;
  }
  .hd {
    padding: 20px 0 80px 0;
    .close {
      width: 40px;
      height: 37px;
      margin: 20px 0 0 50px;
      display: block;
      background-image: url('/static/img/icon-arrow-left.svg');
      background-position: center center;
      fill: #fff;
      background-repeat: no-repeat;
      background-size: 40px 37px;
    }
  }
  .form {
    margin: 60px 60px 0;
    .input {
      position: relative;
      .showPassWord {
        display: block;
        width: 40px;
        height: 21px;
        margin-left: 10px;
        background-image: url('/static/img/icon-login-hide.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }
      .showPassWord.active {
        background-image: url('/static/img/icon-login-show.png');
      }
    }
    .operation {
      padding-top: 45px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      font-size: 32px;
      position: absolute;
      bottom: 60px;
      left: 60px;
      right: 60px;
      .text {
        span {
          vertical-align: middle;
        }
        .reg {
          padding-left: 20px;
        }
        .line {
          height: 34px;
          width: 1px;
          padding: 0 25px 0 0;
          display: inline-block;
          border-right: 1px solid #d8d8d8;
        }
      }
    }
  }
  .submit {
    margin-top: 67px;
    .van-button {
      width: 100%;
      height: 98px;
      .van-button__text {
        font-size: 34px;
        color: #ff0034;
      }
    }
  }
}
</style>
